import React, { Component } from 'react';
import {
	StyleSheet, Text, View
} from "react-native";
import { GLOBAL } from '../../../../../config/global';
import { style } from '../../../../../theme/style';
import { SpaceBetween } from '../../../create/_components/SpaceBetween.js';
import MethodUtil from '../../../../../utils/MethodUtil';
import { CURRENCY } from '../../../../../utils/helper';
import OrderApproveService from '../../_common/service';
import ModalPicDelComponent from '../../../../../component/ModalPicDelComponent';
import ToastUtil from '../../../../../utils/toast';

const scale = GLOBAL.SCALE;
const modalPicDelCfg = {
	visible: false,
	uri: null,
	delPress: () => { },
	picPress: () => { }
}

export class PaymentBaseSection extends Component {
	constructor(props) {
		super(props);

		this.state = {
			previewModalVisible: false,
		}

		modalPicDelCfg.picPress = () => {
			modalPicDelCfg.visible = false;
			modalPicDelCfg.uri = null;
			this.setState({
				previewModalVisible: false,
			});
		}
	}

	componentWillMount () {
	}

	async preview (fileId) {
		const imgData = await OrderApproveService.preview({ fileId });
		if (imgData && imgData.image) {
			let { image } = imgData;
			if (image && image.length) {
				modalPicDelCfg.visible = true;
				modalPicDelCfg.delTextHide = true; //隐藏删除
				modalPicDelCfg.uri = image;
				modalPicDelCfg.attachmentModalStyle = { backgroundColor: 'rgba(0,0,0,0)' };
				this.setState({
					previewModalVisible: true
				});
			}
		}
	}

	render () {
		let { data, choice } = this.props;
		let { companyName, planPayDate, payTypeName, paymentApplyAmount, paymentApplySource, paymentApplySourceName, remark, staffName, appliedAndNonPayment,
			paymentApplyDate, currency, currencyName, openBankName, openAcctNo, creditLimitAmount, creditApplyAmount, companyBanlanceAmount, refundableAmount,
			attachmentFileVOs, organName, bizTeamName } = data;
		/**
		* paymentApplySource
		* DD 采购订单  RK 采购入库  FP 采购发票  FFP 费用发票  TK 客户退款
		*/
		return (
			<View style={styles.itemBox}>
				<View style={[styles.animateBg]}>
					<Text style={styles.itemTitle}>基本信息</Text>
					<SpaceBetween fontLeft={{ title: '申请来源' }} fontRight={{ title: paymentApplySourceName || "" }} />
					<SpaceBetween fontLeft={{ title: '供应商' }} fontRight={{ title: companyName }} />
					<SpaceBetween fontLeft={{ title: '业务组织' }} fontRight={{ title: choice.corpName || '' }} />
					<SpaceBetween fontLeft={{ title: '付款方式' }} fontRight={{ title: payTypeName || '' }} />
					<SpaceBetween fontLeft={{ title: '收款账号' }} fontRight={{ title: openBankName || '' }} />
					<SpaceBetween fontLeft={{ title: '银行卡号' }} fontRight={{ title: openAcctNo || '' }} />
					<SpaceBetween fontLeft={{ title: '申请总金额' }} fontRight={{ title: CURRENCY.getUnit(currency).label + MethodUtil.toThousands(paymentApplyAmount || 0, 2) + CURRENCY.getUnit(currency).text }} />
					{/* {
						currency != 'RMB' ? (
							<View style={{ flexDirection: 'row', justifyContent: 'flex-end', marginRight: 6 * scale }}>
								<Text style={{ color: '#F66464', fontSize: 13 * scale, }}>转换：¥{MethodUtil.toThousands(paymentApplyAmountRmb || 0, 2)}元</Text>
							</View>
						) : null
					} */}
					<SpaceBetween fontLeft={{ title: '币种' }} fontRight={{ title: currencyName }} />
					<SpaceBetween fontLeft={{ title: '付款计划日' }} fontRight={{ title: planPayDate ? planPayDate.substring(0, 10) : '-' }} />
					{paymentApplySource === 'DD' ? <SpaceBetween fontLeft={{ title: '授信余额' }} fontRight={{ title: CURRENCY.getUnit(currency).label + MethodUtil.toThousands(creditLimitAmount || 0) + CURRENCY.getUnit(currency).text }} /> : null}
					{paymentApplySource === 'DD' ? <SpaceBetween fontLeft={{ title: '授信总额' }} fontRight={{ title: CURRENCY.getUnit(currency).label + MethodUtil.toThousands(creditApplyAmount || 0) + CURRENCY.getUnit(currency).text }} /> : null}
					{paymentApplySource === 'TK' ? <SpaceBetween fontLeft={{ title: '客户余额' }} fontRight={{ title: CURRENCY.getUnit(currency).label + MethodUtil.toThousands(companyBanlanceAmount || 0, 2) + CURRENCY.getUnit(currency).text }} /> : null}
					{paymentApplySource === 'TK' ? <SpaceBetween fontLeft={{ title: '已申请未付款金额' }} fontRight={{ title: CURRENCY.getUnit(currency).label + MethodUtil.toThousands(appliedAndNonPayment || 0, 2) + CURRENCY.getUnit(currency).text }} /> : null}
					{paymentApplySource === 'TK' ? <SpaceBetween fontLeft={{ title: '可退款金额' }} fontRight={{ title: CURRENCY.getUnit(currency).label + MethodUtil.toThousands(refundableAmount || 0, 2) + CURRENCY.getUnit(currency).text }} /> : null}
					<SpaceBetween fontLeft={{ title: '申请人' }} fontRight={{ title: staffName }} />
					{paymentApplySource === 'TK' ? <SpaceBetween fontLeft={{ title: '部门' }} fontRight={{ title: organName }} /> : null}
					{paymentApplySource === 'TK' ? <SpaceBetween fontLeft={{ title: '产品组' }} fontRight={{ title: bizTeamName }} /> : null}
					<SpaceBetween fontLeft={{ title: '申请时间' }} fontRight={{ title: paymentApplyDate ? paymentApplyDate.split(' ')[0] : '' }} />
					<SpaceBetween fontLeft={{ title: '备注' }} fontRight={{ title: remark || '无' }} />

					<ModalPicDelComponent {...modalPicDelCfg} />
					{
						attachmentFileVOs && attachmentFileVOs.length ?
							<View style={{ flexDirection: 'row' }}>
								<View style={styles.listItemText}>
									<Text style={styles.text}>附件</Text>
								</View>
								<View style={{ flexDirection: 'column', flex: 4 }}>
									{
										attachmentFileVOs.map((item, index) => {
											if (item.fileId && item.fileExtName) {
												return (
													<Text key={index} style={styles.file} onPress={() => {
														if (item.fileExtName === 'PDF') {
															const { navigate } = this.props.navigation;
															navigate('ContractPdfPage', { finalFileId: item.fileId, title: '附件信息' });
														} else if (item.fileExtName === 'JPG' || item.fileExtName === 'PNG' || item.fileExtName === 'JPEG' || item.fileExtName === 'BMP') {
															this.preview(item.fileId);
														} else {
															ToastUtil.showInfo(`抱歉，暂不支持${item.fileExtName}文件类型的预览～`)
														}
													}}>{item.fileName || ('附件' + index)}</Text>
												)
											} else {
												return null;
											}
										})
									}
								</View>
							</View>
							: null
					}
				</View>
			</View >
		)
	}
}
const styles = StyleSheet.create({
	itemBox: {
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
		paddingBottom: 13 * scale
	},
	itemTitle: {
		fontSize: 14 * scale,
		color: style.color.themeColor,
		height: 20 * scale,
		lineHeight: 20 * scale,
		marginTop: 12 * scale,
		marginBottom: 12 * scale
	},
	animateBg: {
		backgroundColor: style.color.white
	},
	file: {
		flex: 4,
		fontSize: 12 * scale,
		color: style.color.themeColor,
		textAlign: 'right',
		marginLeft: 14 * scale,
		padding: 10
	},
	text: {
		fontSize: 12 * scale,
		color: '#222222'
	},
	textView: {
		flex: 4,
		flexDirection: 'row',
		flexWrap: 'wrap',
		justifyContent: 'flex-end',
		alignItems: 'center',
		padding: 6
	},
	listItemText: {
		flex: 2,
		flexWrap: 'wrap',
		justifyContent: 'space-between',
		padding: 6 * scale
	}
})